<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>
<body>
    <h1>HTML Basics</h1>
    <h1>headings</h1>
    <p>this is a paragraph tag</p>
    <a href="#">this is a link tag with attribute "hred" </a></br>
    <img src="" alt="this is a image tag"></br>
    <button>this is a button, you can set the type attribute such as submit and rest, cannot set the value attribute</button></br>
    <ul>
        <li>this is an unordered list</li>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ul>
    <ol>
        <li>this is an ordered list</li>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ol>
    <dl>
        <p>this is a description list</p>
        <dt>term1</dt>
        <dd>description1</dd>
        <dt>term2</dt>
        <dd>description2</dd>
    </dl>
    <H1>HTML element</H1>
    <p>the HTML element is everything from the start tag to the end tag</p>
    <p>elements can be nested, such as the body tag nested in the html tag</p>
    <p>emply tag is the tag without any content, such as br which defines a line break</p>
    <p>tags are not case-sensitive, the HTML5 standards doesn't require lowcase tags, but W3C recommends lowercase in HTML, and demands lowercase in XHTML</p>
    <H1>HTML attributes</H1>
    <ul>
        <li><p>HTML links are defined with the "href" attribute, which specifies the link address</p></li>
        <li>
            <p>HTM image are defined with the "src" attribute, which specified teh filename of the image source</p>
            <p>images have a set of attributes, which specifies the width and height of the image, such as the width and height attributes</p>
            <p>images have the alt attribute, which specifies the alternative text if the image cannot be displayed</p>
        </li>
        <li><p>style attribute is used to specify the styling of an element, like color, font, size, etc</p></li>
        <li>
            <p>the language of a document can be declared in the html tag with the "lang" attribute, it's important for accessibility and search engine</p>
            <p>For example, the "en-US", the first two letters specify the language, if there is a dialect, use two more letters</p>
        </li>
        <li><p style="color:red" title="this is the title attr">the title attribute is added to P tag or any other tag, the value of this attribute will be displayed as a tooltip(文本提示) when you mouse over the paragraph</p></li>
    </ul>
    <h1>HTML headings</h1>
    <p>we have heading tags from h1 to h6</p>
    <p>it's important to use headings, search engines use these to index the structure and content of your web page </p>
    <p>"hr" tag defines a thematic break in a HTML page, is displayed as a horizontal rule</p>
    <h1>HTML paragraphs</h1>
    <p>HTML display: with HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code</p>
    <p>The browser will remove any extra spaces and extra lines when the page is displayed</p>
    <p>"br" tag defines a line break, we can use it within a paragraph without starting a new paragraph, as below</p>
    <ul>
        <li>
            <h3>first condition</h3>
            <p>list1</p>
            <p>list2</p>
        </li>
        <li>
            <h3>second condition</h3>
            <p>list1 <br> list2</p>
        </li>
    </ul>
    <p>"pre" element can define preformatted text, so that any extra spaces or lines will be preserved</p>
    <p>For example</p>
    <pre>
        this is the test case one with 3 indentation
            this is the test case two
    </pre>
    <h1>HTML styles</h1>
    <p>setting the style of an HTML element, can be done with the style attribute</p>
    <p>the HTML style attribute has the following syntax</p>
    <p> tagname style='property:value;'</p>
    <figure>
        <figcaption>common used attributes</figcaption>
        <ul>
            <li>background-color for background</li>
            <li>color for text colors</li>
            <li>font-family for text font</li>
            <li>font-size for text size</li>
            <li>text-align for text alignment</li>
        </ul>
    </figure>
    <h1>HTML formatting</h1>
    <ul>
        formatting elements are designed to display special types of text:
        <li><b>bold text with b</b></li>
        <li><strong>important text with strong</strong></li>
        <li><i>italic text with i</i></li>
        <li><em>emphsized text with em</em></li>
        <li><mark>marked text with mark</mark></li>
        <li><small>small text with small</small></li>
        <li><del>deleted text with del</del></li>
        <li><ins>inserted text with ins</ins></li>
        <li><sub>subscript(下标) text with sub</sub></li>
        <li><sup>superscript(上标) text with sup</sup></li>
    </ul>
    <h1>HTML quotations</h1>
    <figure>
        <figcaption>q tag (add quotation mark)</figcaption>
        <ul>
            <li>it defines a short quotation</li>
            <li>the browser will add quotation marks around the q element</li>
            <li>For example: <q>   this is a short quotation within q tag</q></li>
        </ul>
    </figure>
    <figure>
        <figcaption>cite tag (words or short section in italic)</figcaption>
        <ul>
            <li>it defines the title of a work</li>
            <li>Browser display cite element in italic</li>
            <li>for example: <cite>The scream</cite></li>
        </ul>
    </figure>
    <figure>
        <figcaption>blackquote tag (paragraph or long section in italic with indentation)</figcaption>
        <ul>
            <li>it defines a section that is quoted from another source</li>
            <li>browser will indent blackquote</li>
            <li>for example: <blockquote>this is a text with the blackquote tag </blockquote></li>
        </ul>
    </figure>
    <figure>
        <figcaption>abbr tag</figcaption>
        <ul>
            <li>it defines an abbreviation or an acronym</li>
            <li>for example: <abbr title="world health organisation">WHO</abbr></li>
        </ul>
    </figure>
    <figure>
        <figcaption>address tag</figcaption>
        <ul>
            <li>it defines the contact information of a document or an article</li>
            <li>the element is displayed in italic</li>
            <li>for example: <address>B0201 2 Barratt Street Hurstville</address></li>
        </ul>
    </figure>
    <h1>HTML colors</h1>
    <figure>
        <figcaption>RGB rgb(255,0,144)  (red,green,blue)</figcaption>
        <ul>
            <li>each number represents the intensity of a color from 0 to 255</li>
        </ul>
        <figcaption>RGBA rgba(255,0,144,0)  (red,green,blue,opacity)</figcaption>
        <ul>
            <li>The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all)</li>
        </ul>
        <figcaption>HEX #ff00dd  (red,green,blue) </figcaption>
        <ul>
            <li>each two letter represents the intensity of a color from 00 to ff</li>
        </ul>
        <figcaption>HSL hsl(0,100%,50%)  (hue,saturation,lightness)</figcaption>
        <ul>
            <li>hue is the color wheel from 0 - 360, red is 0, green is 120, green is 240</li>
            <li>Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.</li>
            <li>Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white</li>
        </ul>
        <figcaption>HSLA hsla(0,100%,50%,0.5)  (hue,saturation,lightness,opacity)</figcaption>
        <ul>
            <li>The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all)</li>
        </ul>
    </figure>
    <h1>HTML CSS</h1>
    <dl>
        <dt>add css to html in 3 ways</dt>
        <dd>inline: using the style attribute in HTML elements</dd>
        <dd>internal: using "style" tag in the "head" section</dd>
        <dd>external: using external css file</dd>
    </dl>
    <h1>HTML links</h1>
    <h2>link colors</h2>
    <ul>
        By default, a link will appear like this:
        <li>an unvisited link is underlined and blue</li>
        <li>a visited link is underlined and purple</li>
        <li>an active link is underlined and red</li>
        <a href="#">this is a link for test</a>
    </ul>
    <h2>the target attribute</h2>
    <ul>
        <li>_blank:  Opens the linked document in a new window or tab</li>
        <li>_self - Opens the linked document in the same window/tab as it was clicked (this is default)</li>
        <li>_parent - Opens the linked document in the parent frame </li>
        <li>_top - Opens the linked document in the full body of the window</li>
        <a href="https://www.baidu.com/" target="_blank">百度搜索</a>
    </ul>
    <h1>HTML tables</h1>
    <p>
        An HTML table is defined with the table tag <br>
        each table row is defind with <code>tr</code><br>
        each table heading is defined with <code>th</code><br>
        each table data/cell is defined with <code>td</code><br>
        it's able to add a caption with the caption tag <br>
    </p>
    <table id="table" width="50%">
        <caption>people statistics</caption>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th> 
            <th>Age</th>
        </tr>
        <tr>
            <td>Jill</td>
            <td>Smith</td> 
            <td>50</td>
        </tr>
        <tr>
            <td>Eve</td>
            <td>Jackson</td> 
            <td>94</td>
        </tr>
    </table>
    <style>
        #table tr:nth-child(odd) {
            color: rgb(233, 233, 67);
            background-color: grey;
        }
    </style>
    <h1>HTML lists</h1>
    <h2>unorder list</h2>
    <p>
        "list-style-type" is used to set the list marker <br>
        we can use disc(default), circle, square or none
    </p>
    <ul style="list-style-type:circle;">
        <li>item1</li>
        <li>item2</li>
    </ul>
    <h2>ordered list</h2>
    <p>
        "type" is used to set the list marker <br>
        we can use "1"(default), "A","a","I","i" <br>
        remeber:  it's to set the type attribute, not the property in the style attribute 
    </p>
    <ol type="A">
        <li>item1</li>
        <li>item2</li>
    </ol>
    <h2>description list</h2>
    <dl>
        <dt>term</dt>
        <dd>description</dd>
    </dl>
    <h2>use of list to create a navigation menu</h2>
    <div>
        <em>question: cannot see the background-color of ul</em>
    </div>
    <ol>
        Reason: the li elements with float attribute are out of the element flow, they cannot auto fit into the ul;
        there are 5 solutions
        <li>set the fixed height for ul</li>
        <li>use :after css property (recommended)</li>
        <li>set the overflow of ul to hidden or auto (best)<br>
            inspect the web page, we can see the margin of ul, and li elements display in the area out of ul. 
            so the content overflows,  that's why we use this property to solve this.
        </li>
        <li>make the ul float as well</li>
        <li>create a div at the end of the div
            set the clear property of the last element within the ul elment to clear:both</li>
    </ol>
    <ul class="navigation" id="navigation">
        <li><a href="#navigation">home</a></li>
        <li><a href="#navigation">contact</a></li>
        <li><a href="#navigation">about</a></li>
        <div id="great"></div>
    </ul>
   
 

    <style>
        .navigation{
            background-color: #272727;
            /* overflow: auto; */
        }
        .navigation li {
            float: left;
            padding:5px;
            margin:5px;
            list-style-type:none;
        }
        .navigation li a{
            color: red;
        }
        /* second solution: */
        /* #navigation:after{
            content:"";
            clear: both;
            display:table;
        } */
    </style>
    <h1>HTML blocks</h1>
    <h2>two important tags for block element and inline elements</h2>
    <p>div tag defines a section in a document (block-level)</p>
    <p>span tag defines a section in a document (inline-level)</p>
    <h1>HTML File Path</h1>
    <h2>File paths are used when linking to external files like</h2>
    <ul>
        <li>web pages</li>
        <li>images</li>
        <li>style sheet</li>
        <li>javascript</li>
    </ul>
    <h2>different forms</h2>
    <style>
        table{
            border: black 1px solid;
            border-collapse: collapse;
            height: 250px;
            width: 100%;
        }
        table th,td{
            border: black 1px solid;    
        }
    </style>
    <table>
        <tr>
            <th>Path</th>
            <th>Description</th>
        </tr>
        <tr>
            <td> img src="picture.jpg" </td>    
            <td>picture.jpg is located in the same folder as the current page</td>
        </tr>
        <tr>
            <td> img src="images/picture.jpg" <br>
                img src="./images/picture.jpg" </td>
            <td style="color:red">picture.jpg is located in the images folder in the current folder</td>
        </tr>
        <tr>
            <td> img src="/images/picture.jpg" </td>
            <td style="color:red">picture.jpg is located in the images folder at the root of the current web</td>
        </tr>
        <tr>
            <td> img src="../picture.jpg" </td>
            <td>picture.jpg is located in the folder one level up from the current folder</td>
        </tr>
    </table>
    <h1>HTML layout techniques</h1>
    <p>there are five different ways to create multicolumn layouts, each has its pros and cons</p>
    <ul>
        <li>HTML table</li>
        <li>CSS float property</li>
        <li>flexbox</li>
        <li>CSS framework</li>
        <li>CSS grid</li>
    </ul>







</body>
</html>